<template>
    <div
        class="song-item-container"
        @click.stop="playThisSong"
        @mouseenter="toggleOperationBtn"
        @mouseleave="toggleOperationBtn"
    >
        <!-- 序号/播放图标 -->
        <div class="index">
            <div v-if="currentSongInfo.id == song.id">
                <img src="../assets/imgs/wave.gif" width="10" alt="" />
            </div>
            <div v-else class="index-num">
                {{ index + 1 }}
            </div>
        </div>
        <!-- 封面 -->
        <div class="cover" v-if="pageConfig.cover.show">
            <img :src="getCoverPath()" height="100%" alt="" />
        </div>
        <!-- 歌曲信息 -->
        <div class="info">
            <div class="song-info">
                <div class="title">{{ song.title }}</div>
            </div>
            <!-- 悬停按钮组 -->
            <div
                class="operation-btn"
                v-show="optBtnVisible"
                v-if="props.opts && props.opts.length > 0"
            >
                <span
                    @click.stop="addToReadyList"
                    v-if="props.opts.includes('add-to-ready-list')"
                >
                    <n-icon size="22" color="#696969"
                        ><PlaylistAddRound
                    /></n-icon>
                </span>
            </div>
            <h1></h1>
        </div>
        <div class="album-info" :style="{ width: pageConfig.album.width }">
            <div class="album-inner">{{ song.artist }}</div>
        </div>

        <div
            class="like"
            v-if="pageConfig.star.show"
            :style="{ width: pageConfig.star.width }"
        >
            <n-icon
                size="24"
                @click.stop="starThisSong"
                :color="starred ? 'red' : '#dddddd'"
            >
                <FavoriteFilled />
            </n-icon>
        </div>
        <div class="duration" :style="{ width: pageConfig.duration.width }">
            <span>
                {{ formatSeconds2Str(song.duration) }}
            </span>
        </div>
    </div>
</template>

<script lang="ts" setup>
interface Props {
    index: number;
    song: ISongItem;
    type: SONG_ITEM_TYPE;
    playOnClick: boolean;
    opts: Array<string>;
}

interface IPageConfig {
    [key: string]: {
        show: boolean;
        width?: string | number;
    };
}

import {
    defineProps,
    ref,
    Ref,
    computed,
    onMounted,
    defineComponent,
    getCurrentInstance,
} from "vue";
import { ISongItem } from "@/types/song-item";
import { SONG_ITEM_TYPE } from "@/constant/song";
import { getCoverUrl } from "@/utils/core";
import { useStore } from "vuex";
import { formatSeconds2Str } from "@/utils/time";
import { toggleSongStar } from "@/api/modules/song";
import { AxiosResponse } from "axios";
import { PlaylistAddRound, FavoriteFilled } from "@vicons/material";
import { NIcon } from "naive-ui";

const store = useStore();
const currentSongInfo = computed(() => store.state.play.currentPlayingSong);
const { username, salt, sToken } = store.getters.authFields;
const props = defineProps<Props>();
const optBtnVisible = ref(false);
const starred = ref(props.song.starred);

// LARGE尺寸默认属性
const pageConfig: Ref<IPageConfig> = ref({
    album: { show: true, width: "40%" },
    cover: { show: false },
    star: { show: true, width: "40px" },
    duration: { show: true, width: "60px" },
});

// 悬停显示/隐藏操作按钮
const toggleOperationBtn = function () {
    optBtnVisible.value = !optBtnVisible.value;
};
// 播放
const playThisSong = function () {
    store.dispatch("play/updatePlayingInfo", props.song);
};
// 添加到播放列表
const addToReadyList = function () {
    store.dispatch("play/add2ReadyList", [props.song]);
};
// 收藏
const starThisSong = function () {
    toggleSongStar({
        u: username,
        s: salt,
        t: sToken,
        id: props.song.id,
        starred: starred.value,
    }).then((res: AxiosResponse) => {
        const { data } = res;
        if (
            data["subsonic-response"] &&
            data["subsonic-response"].status == "ok"
        ) {
            starred.value = !starred.value;
        }
    });
};

onMounted(() => {
    // pageConfig默认值为LARGE, mounted中只对MIDDLE和SMALL做调整
    if (props.type == SONG_ITEM_TYPE.MIDDLE) {
        pageConfig.value.album.show = true;
    }
    if (props.type == SONG_ITEM_TYPE.SMALL) {
        pageConfig.value.album.show = false;
        pageConfig.value.cover.show = true;
        pageConfig.value.star.show = false;
        pageConfig.value.duration = { show: true, width: "60px" };
    }
    // 动态根据opts的长度调整歌曲名称的长度
    if (props.opts) {
        const { proxy } = getCurrentInstance();
        proxy.$el.querySelector(".song-info").style.width = `calc(100% - ${
            props.opts.length * 25
        }px)`;
        proxy.$el.querySelector(".operation-btn").style.width = `${
            props.opts.length * 25
        }px`;
    }
});

const getCoverPath = function (): string {
    return getCoverUrl(username, sToken, salt, props.song.id);
};

defineComponent({
    components: { NIcon },
});
</script>

<style scoped lang="less">
@song-item-height: 56px;
@operation-btn-width: 70px;
.song-item-container {
    height: @song-item-height;
    display: flex;
    padding: 11px 20px 11px 0;
    box-sizing: border-box;
    cursor: pointer;

    .index {
        height: calc(@song-item-height - 2 * 11px);
        width: calc(@song-item-height - 8px);
        text-align: center;
        line-height: calc(@song-item-height - (2 * 11px));
        box-sizing: border-box;
        color: #838383;
    }

    .cover {
        width: calc(@song-item-height - 2 * 11px);
        height: 100%;

        img {
            border-radius: 3px;
        }
    }

    .info {
        flex: 1;
        position: relative;
        padding: 0 10px;
        min-width: 0;

        .song-info {
            height: 100%;
            overflow: hidden;
            width: calc(100% - @operation-btn-width);

            .title {
                font-size: 16px;
                line-height: 34px;
                color: #b2b2b2;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            .tags {
                display: flex;
                font-size: 12px;
                align-items: center;
                color: #999;

                .quality {
                    width: 46px;
                    border: 1px solid #ececec;
                    font-size: 10px;
                    padding: 2px 0;
                    text-align: center;
                    margin-right: 10px;
                    border-radius: 4px;
                    color: #aa7d46;
                }

                .author {
                    flex: 1;
                    min-width: 0;
                    height: 16px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }

        .operation-btn {
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: absolute;
            top: 0;
            right: 0;
            width: @operation-btn-width;
            height: 100%;
        }
    }

    .album-info {
        height: 100%;
        overflow: hidden;
        line-height: calc(@song-item-height - 2 * 11px);
        color: #696969;
        font-size: 14px;
        padding: 0 20px;

        .album-inner {
            height: 100%;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }

    .duration {
        width: 60px;
        text-align: center;
        height: 100%;
        line-height: calc(@song-item-height - (2 * 11px));
        color: #696969;
    }

    .like {
        width: 40px;
        text-align: center;
        overflow: hidden;
        margin: 5px;
    }

    &:hover {
        background-color: #2e2e2e;
    }
}
</style>
